// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import { Actions } from 'react-native-router-flux';
import * as ActionTypes from '../../constants/constants.js'

// antd 按需加载
import { Tabs, Toast } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { list } from './module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, RnFlatList, RnImage, Good } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { press, size, ScreenWidth } from '../../util/utils.js'
class CategoryDetails extends Component {
  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      active: ''
      // // searchBackgroundColor: 'transparent',
      // searchBackgroundColor: '#e43130',
    }
    this.list = list.bind(this)
  }

  componentDidMount() {
    const { categoryDetails, categoryGood: { nextPage, pageSize } } = this.props
    // InteractionManager.runAfterInteractions(() => {
      // ...耗时较长的同步执行的任务...
      this.setState({
        active: categoryDetails.id
      }, () => {
        this.list({
          pageNum: nextPage,
          pageSize,
          productCategoryId: this.state.active
        })
      })
    // });
  }

  componentWillUnmount() {
    const { dispatch } = this.props
    dispatch({
      type: ActionTypes.categoryGoodReset,
    })
  }

  onRefresh = () => {
    this.setState({ refreshing: true });
    const { categoryGood: { pageSize } } = this.props
    this.list({
      pageNum: 1,
      pageSize,
      productCategoryId: this.state.active,
      refresh: true
    }).then(res => {
      this.setState({ refreshing: false });
    })
  }

  onEndReached = () => {
    
    const { user, categoryGood: { nextPage, pageSize, list, total } } = this.props
    if (list.length < total) {
      this.list({
        pageNum: nextPage,
        pageSize
      })
    }
  }

  onScroll = (e) => {
    const { searchBackgroundColor } = this.state
    if (e.nativeEvent.contentOffset.y >= size(366) - 44) {
      this.setState({
        searchBackgroundColor: '#e43130'
      })
    } else {
      this.setState({
        searchBackgroundColor: 'transparent'
      })
    }
  }

  changeCategory = (active) => {
    const { categoryGood: { nextPage, pageSize } } = this.props
    this.setState({
      active
    }, () => {
      this.list({
        pageNum: nextPage > 0 ? nextPage : 1,
        pageSize,
        productCategoryId: this.state.active
      })
    })
  }

  render() {
    const { refreshing, active } = this.state
    const { categoryDetails, categoryGood } = this.props
    return (
      <View style={Style.container}>
        <Status />
        <View style={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          backgroundColor: '#fff',
          borderBottomWidth: 1,
          borderStyle: 'solid',
          borderBottomColor: '#e5e5e5'
        }}>
          <TouchableOpacity
            style={{
              width: 44,
              height: 44,
              alignItems: 'center',
              justifyContent: 'center',
            }}
            onPress={() => {
                Actions.pop()
            }}
          >
            <Icon name="md-arrow-back" size={22} color="#232326" />
          </TouchableOpacity>
          <View style={{
            flex: 1,
            height: 30,
          }}>
            <View
              style={{
                paddingVertical: 0,
                paddingHorizontal: 15,
                borderRadius: 15,
                height: 30,
                backgroundColor: '#f7f7f7',
              }}
            >
              <Text style={{ fontSize: 12, color: '#232326', lineHeight: 30, }}>盗墓笔记</Text>
            </View>
          </View>
          <TouchableOpacity
            style={{
              width: 44,
              height: 44,
              alignItems: 'center',
              justifyContent: 'center',
            }}
            onPress={() => {
                Actions.qrCode()
            }}
          >
            <Icon name="md-mail" size={22} color="#232326" />
          </TouchableOpacity>
        </View>
        <View style={{
          height: 46,
          paddingLeft: 15,
          justifyContent: 'center',
        }}>
          <Text style={{ fontSize: 14, color: '#333', lineHeight: 16, }}>{categoryDetails.name}</Text>
        </View>
        <View style={{
          flexDirection: 'row',
          alignItems: 'flex-start',
          flexWrap: 'wrap',
        }}>
          {categoryDetails.children.map((item, index) => {
            return (
              <TouchableOpacity
                key={index}
                style={{
                  width: ScreenWidth / 4,
                  height: 46,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
                onPress={() => {
                    this.changeCategory(item.id)
                }}
              >
                <Text style={[
                  { fontSize: 14, color: '#333', lineHeight: 16, textAlign: 'center' },
                  active == item.id ? {
                    color: '#e93b3d',
                  } : {
                      color: '#333',
                    }
                ]}>{item.name}</Text>
              </TouchableOpacity>
            )
          })}
        </View>
        <RnFlatList
          style={{
          }}
          columnWrapperStyle={{
            backgroundColor: '#f0f2f5',
            paddingLeft: 3,
            paddingRight: 3,
            paddingTop: 3,
          }}
          // onScroll={this.onScroll}
          refreshing={refreshing}
          onRefresh={this.onRefresh}
          onEndReached={this.onEndReached}
          numColumns={2}
          removeClippedSubviews={true}
          datas={categoryGood}
          renderItem={({ item }) => <Good data={item} />}
        />
      </View >
    );
  }
}


export default connect(({ categoryDetails, categoryGood }) => ({
  categoryDetails, categoryGood
}))(pureRender(CategoryDetails))
